<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件</title>
  </head>
  <body>
    <!-- 
        事件
        触发--- 响应机制

        事件三要素
        1. 事件源 （谁）
        2. 事件类型 （什么事件）
        3. 事件处理程序 （做啥）

        常用事件
        1.鼠标事件
          onclick 	        左单击
          onmouseenter 	    鼠标移入
          onmouseleave 	    鼠标移出
              oncontextmenu 	  右单击	 
              ondblclick 	      左双击
              onmouseup 	      按键松开
              onmousedown 	    按键按下
              onmouseover 	    鼠标移到某元素之上
              onmouseout 	      鼠标从某元素移开
              onmousemove 	    鼠标被移动

         2.键盘事件
            onkeyup 	  某个键盘按键被松开     
            onkeydown 	某个键盘按键被按下
              onkeypress 	某个键盘按键被按下并松开

        3.框架/对象事件
            onload 	一张页面或一幅图像完成加载。 
            onscroll 	当文档被滚动时发生的事件。
            onresize 	窗口或框架被重新调整大小。
                onabort 	图像的加载被中断。 ( <object>) 	
                onbeforeunload 	该事件在即将离开页面（刷新或关闭）时触发
                onerror 	在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>) 	 
                onhashchange 	该事件在当前 URL 的锚部分发生修改时触发。 	 
                onpageshow 	该事件在用户访问页面时触发 	
                onpagehide 	该事件在用户离开当前网页跳转到另外一个页面时触发 	
                onunload 	用户退出页面。 ( <body> 和 <frameset>)
        
        4.表单事件
            onblur 	  元素失去焦点时触发 
            onchange 	该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) 	
            onfocus 	元素获取焦点时触发 
            onsubmit 	表单提交时触发
                onreset 	表单重置时触发 
                onfocusin 	元素即将获取焦点时触发 
                onfocusout 	元素即将失去焦点时触发 
                oninput 	元素获取用户输入时触发 	
                onsearch 	用户向搜索域输入文本时触发 ( <input="search">) 	 
                onselect 	用户选取文本时触发 ( <input> 和 <textarea>) 	

        5.剪贴板事件
            oncopy 	  该事件在用户拷贝元素内容时触发 	 
            oncut 	  该事件在用户剪切元素内容时触发 	 
            onpaste 	该事件在用户粘贴元素内容时触发
     -->
    <!-- 事件绑定方式一 : 直接绑定在元素上 -->
    <!-- <input type="button" value="按钮" onclick="sayHello()" /> -->

    <input type="button" value="按钮" />

    <input type="text" onkeyup="alert('按键松开了...')" />
    <script>
      /* function sayHello() {
        alert('你好呀!')
      } */

      /* 事件绑定方式二: js中动态绑定事件,实现HTML和JS的分离 */
      document.querySelector('input').onclick = function () {
        alert('你好!')
      }
    </script>
  </body>
</html>
